<template>
	<view class="vip-page">
		<view class="vipBg">
			<image src="/pagesA/static/vipBg.png" style="width: 100%;height: 100%;" mode=""></image>
		</view>
		<view class="card-header">
			<!-- 顶部位置信息 -->
			<view class="head_" @click="goBack">
				<wd-icon name="arrow-left" size="22px" color="#fff" ></wd-icon>
			</view>
			<view class="user-info" v-if="swiperList.length > 0">
				<view class="avatar">
					<image :src="swiperList[current]?.avatar || '/static/imgnull.png'" class="avatar-img" mode="aspectFill"></image>
				</view>
				<view class="user-details">
					<view>
						<text class="username">{{swiperList[current]?.name || ''}}</text>
						<image src="/pagesA/static/vip2.png" style="width: 63rpx;height: 31rpx;padding-left: 10rpx;" mode=""></image>
					</view>
					<view class="member-id">
						<text v-if="swiperList[current]?.venueVipCode != ''">Change会员编号：{{swiperList[current]?.venueVipCode || '-'}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- VIP会员卡片 -->
		<view class="vip-card">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular indicator-dots :current="current" @change="changeCurrent">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<view class="card-content">
							<view class="membership-info">
								<view class="membership-level">
									<image src="/pagesA/static/v.png" style="width: 68.34rpx;height: 66.94rpx;padding-right: 20rpx;" mode=""></image>
									<view class="">
										<text class="level-text">{{item.venueName || ''}}</text>
										<text class="expire-date"><text style="color: #F3CF9E;">{{uni.$uv.timeFormat(item.expireAt,'yyyy-mm-dd') || ''}} </text>到期</text>
									</view>
									<view class="level-badge" @click="goPay(item)" v-if="item.isOpenMonth == 0">
										<!-- <text class="badge-text">开月卡￥{{item.monthPrice || '0'}}</text> -->
										<text class="badge-text">{{item.openStr || ''}}</text>
									</view>
									<view class="level-badge2" v-else>
										<text class="badge-text2">月卡到期时间：{{uni.$uv.timeFormat(item.monthExpireAt,'yyyy-mm-dd') || ''}}</text>
									</view>
									<!-- <text class="level-badge2" v-else><text style="color: #fff;"> -->
								</view>
								<text class="vip-desc">VIP会员 <text style="color: #F3CF9E;">可获得以下权益</text> </text>
							</view>
							<view class="function-icons">
								<!-- <view class="icon-item" @click="handleFunction('bar',item.venueId)">
									<image src="/pagesA/static/sb.png" class="function-icon" mode=""></image>
									<text class="icon-label">水吧</text>
								</view> -->
								<view class="icon-item" @click="handleFunction('course')">
									<image src="/pagesA/static/mjsk.png" class="function-icon" mode=""></image>
									<text class="icon-label">买健身课</text>
								</view>
								<view class="icon-item" @click="handleFunction('transfer')">
									<image src="/pagesA/static/zk.png" class="function-icon" mode=""></image>
									<text class="icon-label">转卡</text>
								</view>
								<view  class="more-btn2">
									<view class="more-btn" v-if="item.monthRefund == 1" @click="outVip(item.venueId)" >退卡</view>
								</view>
							</view>
						</view>
				<!-- 		<view class="indicator">
							{{ current + 1 }}/{{ 3 }}
						</view> -->
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<!-- 会员信息表单容器 -->
		<view class="member-form-container" v-if="swiperList.length > 0">
			<!-- 编辑信息按钮 - 移到外层右上角 -->
			<view class="edit-btn-wrapper">
				<text class="edit-btn" @click="changeInput(swiperList[current])">
					{{ showInput ? '保存信息' : '编辑信息' }}
				</text>
			</view>
			
			<!-- 会员信息框 -->
			<view class="member-form">
				<!-- 中心会员信息模块 -->
				<view class="center-member-info">
					<text class="center-title">会员信息</text>
				</view>
				
				<view class="form-item">
					<view class="form-icon">
						<image src="/pagesA/static/vip1.png" style="width: 23rpx;height: 26rpx;" mode=""></image>
					</view>
					<text class="form-label">姓名</text>
					<text class="form-label2">{{swiperList[current]?.name || ''}}</text>
				</view>
				
				<view class="form-item">
					<view class="form-icon">
						<image src="/pagesA/static/vip_2.png" style="width: 26rpx;height: 21rpx;" mode=""></image>
					</view>
					<text class="form-label">紧急联系人</text>
					<text class="form-label2" v-if="!showInput">{{swiperList[current]?.urgentLinker || ''}}</text>
					<wd-input v-else-if="swiperList[current]" type="number" no-border :focus="showInput"
						@blur="showInput=false" custom-class="custom-classInput" v-model.trim="swiperList[current].urgentLinker"
						placeholder="请输入" @confirm="inputConfirm" />
				</view>
				
				<view class="form-item" style="flex-direction: column;align-items: start;">
					<view style="display: flex;justify-content: space-between;width: 100%;" @click="collapseValue=!collapseValue">
						<view class="form-icon">
							<image src="/pagesA/static/vip3.png" style="width: 24rpx;height: 25rpx;" mode=""></image>
							<text class="form-label" style="margin-left: 24rpx;">人脸信息</text>
						</view>
						<view class="form-label2">
							<wd-icon :name="!collapseValue?'arrow-down':'arrow-up'" size="18px"></wd-icon>
						</view>
					</view>
					<view style="margin-top: 40rpx;" v-if="collapseValue">
						<image :src="swiperList[current]?.faceImage || '/static/imgnull.png'" style="width: 100px;height: 100px;" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 其他信息 -->
		<view class="other-info">
			<view class="info-item" @click="handleFunction('transfer')">
				<view class="info-icon">
					<image src="/pagesA/static/vip4.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
				</view>
				<text class="info-label">其他信息</text>
				<view class="form-label_2">
					<wd-icon name="arrow-right" size="18px"></wd-icon>
				</view>
			</view>
			<!-- <view class="info-item">
				<view class="info-icon">
					<image src="/pagesA/static/vip5.png" style="width: 24rpx;height: 21rpx;" mode=""></image>
				</view>
				<text class="info-label">邀请信息</text>
				<text class="form-label2">
					<wd-icon name="arrow-right" size="18px"></wd-icon>
				</text>
			</view> -->
		</view>

		<!-- 续费按钮 -->
		<!-- <view class="renew-section">
			<wd-button  custom-class="renew-btn" @click="handleRenew">立即续费</wd-button>
		</view> -->
		<wd-popup v-model="showRefundPopup" position="center" custom-style="border-radius: 24rpx; width: 500rpx; padding: 40rpx;">
			<view class="pop-box">
				<view class="popup-title">您确定要退卡吗？</view>
				<view class="t1">所剩退款金额会立即退回，但退卡后半年内不得再次申请办理是否确认退款？</view>
				<view class="t2">
					<span style="color:red;padding-right: 6rpx;">退款规则:</span>
					<span v-if="messageInfo.refundType==1">(365 - {{messageInfo.useMonth || 0}}) X ({{messageInfo.price || 0}} ÷ 365)</span>
					<span v-else>(12 - {{messageInfo.useMonth || 0}}) X ({{messageInfo.price || 0}} ÷ 12) X 0.85</span>
				</view>
				<view class="t3">
					<span style="color:red;padding-right: 6rpx;">退款金额:</span>
					<span>￥{{messageInfo.refundMoney || 0}}</span>
				</view>
				<view class="popup-buttons">
					<wd-button custom-class="cancel-btn" @click="cancelRefund">取消</wd-button>
					<wd-button 
						custom-class="confirm-btn" 
						:class="{ 'disabled': !canConfirm }"
						:disabled="!canConfirm"
						@click="confirmRefund">
						{{ isCountdownActive ? `确认退卡 (${countdown})` : '确认退卡' }}
					</wd-button>
				</view>
			</view>
		</wd-popup>
		<fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
	</view>
</template>

<script setup>
	import { useUserStore } from '@/store/user';
	const userStore = useUserStore();
	const collapseValue = ref(false);
	const loadActive = ref(false);
	const showInput = ref(false);
	const current = ref(0);
	const swiperList = ref([]);
	const editId = ref(null);
	const phoneNum = ref('');
	const messageInfo = ref({});
	const showRefundPopup = ref(false);
	const currentVenueId = ref(null);
	const countdown = ref(5);
	const isCountdownActive = ref(false);
	const canConfirm = ref(false);
	let countdownTimer = null;
	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};
	// 返回
	const changeCurrent = (e) => {
		current.value = e.detail.current;
	};
	// 编辑/保存信息
	const changeInput = (e) => {
		if (!swiperList.value || !swiperList.value[current.value]) return;
		
		if (showInput.value) {
			// 当前是编辑状态，点击保存
			inputConfirm();
		} else {
			// 当前是查看状态，点击编辑
			editId.value = e.applyId;
			phoneNum.value = swiperList.value[current.value].urgentLinker;
			showInput.value = true;
		}
	}

	// 保存信息修改
	const inputConfirm = () => {
		if (!swiperList.value || !swiperList.value[current.value]) return;
		
		if(!/^1[3-9]\d{9}$/.test(swiperList.value[current.value].urgentLinker)){
			uni.showToast({
				title: '请输入正确的手机号',
				icon:'none'
			})
			setTimeout(() => {
				swiperList.value[current.value].urgentLinker = phoneNum.value;
			}, 200);
			return;
		}

		uni.api.updChangeApply({
			applyId:editId.value,
			urgentLinker:swiperList.value[current.value].urgentLinker,
		}).then(res => {
			uni.showToast({
				title: '保存成功',
				icon:'none'
			})
			// 切换回查看状态
			showInput.value = false;
		}).catch(err => {
			uni.showToast({
				title: '保存失败，请重试',
				icon:'none'
			})
		})
	}
	// 月卡支付
	const goPay = (item) => {
		const params = {
			venueId:item.venueId,
			monthPrice:item.monthPrice,
		}
		uni.navigateTo({
			url: `/pagesA/view/openVip/pay2?params=${JSON.stringify(params)}`
		})
	}

	// 退卡
	const outVip = async (venueId) => {
       const res = await uni.api.refundApplyMsg({
			venueId:venueId,
		})
		if(res.code==0){
			messageInfo.value = res.data;
			currentVenueId.value = venueId;
			showRefundPopup.value = true;
			startCountdown();
		}
	}

	// 取消退卡
	const cancelRefund = () => {
		showRefundPopup.value = false;
		resetCountdown();
	}

	// 确认退卡
	const confirmRefund = () => {
		if (!canConfirm.value) {
			return;
		}
		uni.api.refund({
			venueId: currentVenueId.value,
		}).then(res => {
			if(res.code==0){
				showRefundPopup.value = false;
				resetCountdown();
				uni.showToast({
					title: '退卡成功',
					icon:'none'
				})
				setTimeout(() => {
					uni.navigateBack();
				}, 200);
			}
		})
	}

	// 开始倒计时
	const startCountdown = () => {
		// 清理之前的定时器
		if (countdownTimer) {
			clearInterval(countdownTimer);
			countdownTimer = null;
		}
		
		// 重置倒计时状态
		countdown.value = 5;
		isCountdownActive.value = true;
		canConfirm.value = false;
		
		countdownTimer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				clearInterval(countdownTimer);
				countdownTimer = null;
				isCountdownActive.value = false;
				canConfirm.value = true;
			}
		}, 1000);
	}

	// 重置倒计时
	const resetCountdown = () => {
		// 清理定时器
		if (countdownTimer) {
			clearInterval(countdownTimer);
			countdownTimer = null;
		}
		
		countdown.value = 5;
		isCountdownActive.value = false;
		canConfirm.value = false;
	}

	// 处理功能点击
	const handleFunction = (type,venueId) => {
		switch(type) {
			case 'bar':
				// 跳转到水吧页面
				uni.navigateTo({
					url: '/pagesA/view/waterBar/index?venueId='+venueId
				});
				break;
			case 'course':
				uni.navigateTo({
					url: '/pagesA/view/course/index'
				});
				break;	
			default:
				uni.showToast({
					title: '敬请期待',
					icon:'none'
				})
				break;
		}
	};
	
	//获取积分
	const myDetail = async () => {
		loadActive.value = true;
		const res = await uni.api.getChangeDetail();
		loadActive.value = false;
		if(res.code==0){
			swiperList.value = res.data || [];
		}
	}
	
	onShow( () => {
		myDetail();
	});
	// 处理续费
	const handleRenew = () => {
		console.log('立即续费');
		// 跳转到续费页面
	};
</script>

<style lang="scss">
	.uni-margin-wrap {
		width: 690rpx;
		box-sizing: border-box;
		.swiper {
			height: 450rpx;
			width: 660rpx;
			position: relative;
			.indicator{
				position: absolute;
				left: 50%;
				transform: translateX(-50%,50%);
				right: 20rpx;
				bottom: 20rpx;
			}
		}
		.swiper-item {
			display: block;
			margin: 0 auto;
			height: 450rpx;
			text-align: center;
			// background: radial-gradient( 0% 0% at 0% 0%, #303145 0%, #44495E 100%), #080409;
			border-radius: 24rpx;
		}
	}
	.vip-card {
		width: 670rpx;
		margin-left: 40rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 10;
		margin-top: 48rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		// border: 2rpx solid #CAAD86;
		background: linear-gradient(to left,#44495E,#303145);
		.card-content {
			padding: 42rpx;
			
			// margin-top: -100px;
			// top: 0;
			.membership-info {
				margin-bottom: 40rpx;
				.membership-level {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					.level-text {
						font-size: 26rpx;
						font-weight: bold;
						color: #fff;
						margin-right: 20rpx;
					}
					.level-badge {
						padding: 4rpx 26rpx;
						line-height: 46rpx;
						background: radial-gradient( 100% 100% at 0% 0%, #F8D9AD 0%, #E9B87A 100%), #000000;
						border-radius: 28rpx;
						// 靠右
						margin-left: auto;
						
						.badge-text {
							font-size: 26rpx;
							color: #333;
							font-weight: 500;
						}
					}
					.level-badge2 {
						padding: 4rpx 0 26rpx;
						line-height: 46rpx;
						// 靠右
						margin-left: auto;
						color: #fff;
						.badge-text2 {
							font-size: 22rpx;
							color: #fff;
						}
					}
				}
				
				.expire-date {
					display: block;
					font-size: 22rpx;
					color: rgba(255, 255, 255, 0.8);
					margin-top: 8rpx;
				}
				
				.vip-desc {
					font-weight: 400;
					font-size: 19rpx;
					color: #FFFFFF;
				}
			}
			
			.function-icons {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.icon-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 25%;
					.function-icon {
						width: 76rpx;
						height: 76rpx;
						margin-bottom: 12rpx;
					}
					
					.icon-label {
						font-size: 24rpx;
						color: #fff;
					}
				}
				.more-btn2 {
					margin-left: auto;
					height: 46rpx;
					line-height: 46rpx;
				}
				.more-btn {
					background: #808187;
					border-radius: 28rpx;
					padding: 4rpx 24rpx;
					margin-left: auto;
					margin-top: 66rpx;
					height: 46rpx;
					line-height: 46rpx;
					font-size: 24rpx;
					color: #b7b8b9;
				}
			}
		}
	}
	.head_ {
		position: absolute;
		top: 0;
		left: 25rpx;
		right: 0;
		height: calc(var(--status-bar-height) + 112rpx);
		width: calc(100% - 25rpx);
		display: flex;
		align-items: flex-end;
	}
	.vip-page {
		min-height: 100vh;
		background: rgba(37, 37, 49, 1);
		color: #fff;
		position: relative;
		.vipBg{
			position: absolute;
			right: 0;
			top: 30rpx;
			width: 596rpx;
			height: 475rpx;
			z-index: 1;
		}
	}
	.card-header {
		display: flex;
		// justify-content: center;
		align-items: center;
		position: relative;
		z-index: 10;
		padding-top: 180rpx;
		padding-left: 50rpx;
		box-sizing: border-box;
		.user-info {
			display: flex;
			align-items: center;
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 24rpx;
				.avatar-img {
					width: 100%;
					height: 100%;
				}
			}
			.user-details {
				.username {
					font-size: 36rpx;
					font-weight: bold;
					color: #fff;
					margin-bottom: 8rpx;
				}
				
				.member-id {
					height: 40rpx;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.7);
				}
			}
		}
		
		.crown-icon {
			.crown-img {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.member-form-container {
		margin: 120rpx 30rpx 40rpx;
		position: relative;
		z-index: 10;
		
		.edit-btn-wrapper {
			position: absolute;
			top: -80rpx;
			right: 20rpx;
			z-index: 20;
			
			.edit-btn {
				background: #737478;
				color: #CAAD86;
				font-size: 24rpx;
				font-weight: 500;
				padding: 6rpx 16rpx;
				border-radius: 20rpx;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
			}
		}
	}
	
	.member-form {
		border: 2rpx solid #CAAD86;
		border-radius: 24rpx;
		padding: 40rpx;
		position: relative;
		background: rgba(37, 37, 49, 0.8);
		
		.center-member-info {
			position: absolute;
			top: -30rpx;
			left: 50%;
			transform: translateX(-50%);
			// background: linear-gradient(to left, #F8D9AD, #e9b97c);
			background: rgba(37, 37, 49, 1);
			padding: 8rpx 32rpx;
			// border-radius: 20rpx;
			// z-index: 15;
			
			.center-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #F8D9AD;

			}
		}
		
		.form-item {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			position: relative;
			margin-top: 20rpx;
			
			border-bottom: 1px solid #CAAD86;
			.form-icon {
				margin-right: 24rpx;
				.item-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
			
			.form-label {
				flex: 1;
				font-size: 28rpx;
				color: #fff;
			}
			
			.form-label2 {
				font-size: 28rpx;
				color: #CAAD86;
				font-weight: 400;
			}
			
		}
		
		// 第一个form-item增加上边距
		.form-item:first-child {
			margin-top: 40rpx;
		}
	}

	.other-info {
		margin: 40rpx 30rpx;
		padding:10rpx 40rpx;
		.info-item {
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			border-bottom: 1px solid #CAAD86;
			position: relative;
			.info-icon {
				margin-right: 24rpx;
				
				.item-icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
			
			.info-label {
				font-size: 28rpx;
				color: #fff;
			}
			.form-label_2 {
				position: absolute;
				right: 0;
				top: 24rpx;
			}
			
		}
		// 最后一个不显示
		// .info-item:last-child{
		// 	border: none;
		// }
	}
	:deep(.collapse){
		background-color: #30303b !important;
	}
	
	:deep(.wd-collapse-item__header){
		padding-left: 0rpx !important;
		width: 570rpx !important;
	}
	
	:deep(.wd-collapse-item){
		top: 10rpx !important;
	}
	
	:deep(.wd-collapse-item__title){
		color: #fff !important;
		font-size: 28rpx !important;
		
	}
	
	.renew-section{
		width: 750rpx;
		height: 136rpx;
		background: linear-gradient(to bottom, #303145, #44495E);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	:deep(.renew-btn) {
	   width: 335rpx !important;
	   height: 75rpx !important;
	   background: linear-gradient( to left, #F8D9AD,#e9b97c) !important;
	   border-radius: 37rpx 37rpx 37rpx 37rpx !important;
	   color: #22222E !important;
	   font-size: 36rpx !important;
	 }
	:deep(.custom-classInput){
		background: #30303c !important;
	}
	:deep(.wd-input__inner){
		color: #fff !important;
	}
	.pop-box{
		display: flex;
		gap: 10rpx;
		flex-direction: column;
		align-items: flex-start;
		font-size: 22rpx;
		color: #333;
		
		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			text-align: center;
			width: 100%;
		}
		
		.popup-buttons {
			display: flex;
			justify-content: space-between;
			gap: 20rpx;
			margin-top: 30rpx;
			width: 100%;
		}
	}
	
	:deep(.cancel-btn) {
		flex: 1;
		height: 70rpx !important;
		background: #f5f5f5 !important;
		color: #666 !important;
		border: 1rpx solid #ddd !important;
		border-radius: 35rpx !important;
	}
	
	:deep(.confirm-btn) {
		flex: 1;
		height: 70rpx !important;
		background: linear-gradient(to left, #F8D9AD, #e9b97c) !important;
		color: #333 !important;
		border-radius: 35rpx !important;
	}
	
	:deep(.confirm-btn.disabled) {
		background: #ccc !important;
		color: #999 !important;
		cursor: not-allowed !important;
		opacity: 0.6 !important;
	}
</style>